import { ElMessageBox, ElMessage } from "element-plus";
// import { HandleData } from "./interface";
import { h } from "vue";

/**
 * @description 操作单条数据信息 (二次确认【删除、禁用、启用】)
 * @param {Function} api 操作数据接口的api方法 (必传)
 * @param {Object} params 携带的操作数据参数 {id,params} (必传)
 * @param {String} message[] 提示信息 (必传),message[0]操作类型，messagep[1]操作对象
 * @param {String} confirmType icon类型 (不必传,默认为 warning)
 * @returns {Promise}
 */
export const useHandleData = (
  api: (params: any) => Promise<any>,
  params: any,
  title: string[],
  toDoList: string[],
  notToDoList: string[]
  // icon: string
  // confirmType?: HandleData.MessageType = "warning"
) => {
  return new Promise((resolve, reject) => {
    let h1: any[] = [
      h(
        "div",
        {
          class: "box-title"
        },
        [
          h("i", {
            class: "iconfont icon-bg-warning"
          }),
          h(
            "span",
            {
              class: "title"
            },
            `您确定要${title[0]}以下${title[1]}吗？`
          )
        ]
      )
    ];
    // 可操作项
    if (toDoList.length > 0) {
      h1.push(
        h(
          "div",
          {
            class: "todo-title"
          },
          "当前有" + toDoList.length + "项可执行"
        ),
        h(
          "div",
          {
            class: "todo-box"
          },
          toDoList.map(item => {
            const str = h(
              "span",
              {
                class: "todo-item",
                title: item
              },
              item
            );
            return str;
          })
        )
      );
    }
    // 不可操作项
    if (notToDoList.length > 0) {
      h1.push(
        h(
          "div",
          {
            class: "not-todo-title"
          },
          [notToDoList.length + "项", h("span", { class: "warning-text" }, "无法操作"), "，已忽略"]
        )
      );
      const h2: any = notToDoList.map(item => {
        const str = h(
          "span",
          {
            class: "not-todo-item",
            title: item
          },
          item
        );
        return str;
      });
      h1.push(
        h(
          "div",
          {
            class: "no-todo-box"
          },
          h2
        )
      );
    }
    ElMessageBox({
      title: "",
      message: h("p", null, h1),
      showCancelButton: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      customClass: "confirm-box",
      showConfirmButton: toDoList.length > 0,
      // type: confirmType,
      beforeClose: (action, instance, done) => {
        if (action === "confirm") {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = "Loading...";
          setTimeout(() => {
            done();
            setTimeout(() => {
              instance.confirmButtonLoading = false;
            }, 300);
          }, 3000);
        } else {
          done();
        }
      }
    }).then(async () => {
      console.log(params);
      const res = await api(params);
      if (!res) return reject(false);
      ElMessage({
        type: "success",
        message: `${title[0]}成功!`
      });
      resolve(true);
      // ElMessage({
      //   type: "info",
      //   message: `action: ${action}`
      // });
    });
  });
};
